{include file="public/header"}
<title>设计案例</title>
<style>
    body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color: #fff;
    }
    /*头部*/
    .top{
        height: 60px;
        width: 100%;
        background:rgba(22,26,39,1);
    }
    .top_box{
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        align-items: center;

    }
    .top_name_left{
        width:38px;
        height:38px;
        background:rgba(52,99,230,1);
        border-radius:10px;
        margin-right: 10px;
    }
    .top_name{
        height:60px;
        font-size:24px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:60px;
    }
    .top_name_r{
        width:76px;
        height:30px;
        border-radius:15px;
        border:1px solid rgba(255,255,255,1);
        margin-left:26px;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .top_name_r img{
        height: 16px;
        width: 16px;
    }
    .top_name_r span{
        height:22px;
        line-height: 22px;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        margin-left: 3px;
    }
    .lii{
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:#84868D;
        line-height:22px;
        margin-right: 24px;
    }
    .white{
        color: #fff;
    }
    .top_login{
        margin-left: 36px;
        display: flex;
        align-items: center;
    }
    .top_login img{
        width: 28px;
        height: 28px;
    }
    .top_login span{
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:22px;
        margin-left: 8px;
    }
    .top_marginR{
        margin-right: 16px;
    }
    /*头部*/

    /*footer2样式*/
    .footer2{
        width:100%;
        height:168px;
        background:rgba(255,255,255,1);
        box-shadow:0px -8px 20px 0px rgba(0,0,0,0.04);
    }
    .footerint{
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }
    .footer_word{
        padding-top: 20px;
        padding-left: 268px;
    }
    .footer_word span{
        width:420px;
        height:68px;
        font-size:22px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:34px;
        margin-bottom: 25px;
    }
    .footer_js{
        height:21px;
        font-size:15px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:21px;
        margin-right: 25px;
    }
    .footer_ma{
        width: 120px;
        height: 120px;
        padding-top: 25px;
        padding-right: 75px;
    }
    .footer_ma img{
        width: 100%;
        height: 100%;
    }
    .footer_phone{
        width: 145px;
        height: 200px;
        position: absolute;
        bottom: 0;
        left: 94px;
        box-shadow:0px 18px 20px 0px rgba(0,0,0,0.08);
    }
    .footer_phone img{
        width: 100%;
        height: 100%;
    }
    .footer_del{
        width: 16px;
        height: 16px;
        position: absolute;
        top: 17px;
        right: 3px;
    }
    .footer_del img{
        width: 100%;
        height: 100%;
    }
    /*footer2样式*/
    /*footer1样式*/
    .footer{
        width:100%;
        height:130px;
        background:rgba(31,31,31,1);
        display: flex;
        align-items: center;
    }
    .footer_in{
        width: 1210px;
        margin: 0 auto;
        height:18px;
        font-size:13px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:18px;
    }
    /*footer1样式*/

    /*swiper*/
    .swiper-containerr{
        height: 390px;
        width: 100%;
    }
    .swiper-slide-img{
        width: 100%;
        height: 390px;
    }
    .swiper-pagination{
        left: 0;
        right: 0;
        margin: 16px auto;
    }
    .swiper-pagination-bullet{
        width: 26px;
        height: 4px;
        background-color: #D8D8D8;
        border-radius:4px;
        margin-right: 10px;
    }
    .swiper-pagination-bullet-active{
        width: 26px;
        height: 4px;
        background-color: #3463E6;
        border-radius:4px;
    }
    .bgc{
        background-color: red;
        height: 100%;
        width: 100%;
    }
    /*swiper*/
    /*内容*/
    .outer{
        width: 1200px;
        margin: 80px auto 0;
    }
    .contents{
        margin-bottom:35px;
    }
    .contents_title{
        margin-top: 80px;
        margin-bottom: 20px;
        align-items: flex-end;
    }
    .contents_title_font{
        height:50px;
        font-size:36px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:50px;
    }
    .contents_title_more{
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(52,99,230,1);
        line-height:22px;
    }
    .contents_marginbottom{
        margin-bottom: 80px;
    }

    .card{
        width:280px;
        height:331px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 6px 0px rgba(0,0,0,0.06);
        border-radius:4px;
        margin-right: 20px;
        margin-bottom: 20px;
        float: left;
        cursor: pointer;
    }
    .card:hover{
        box-shadow:0px 10px 20px 0px rgba(0,0,0,0.08);
    }
    .card img{
        width: 100%;
        height: 213px;
        border-radius:4px 4px 0 0;
    }
    .card_word{
        width:257px;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:24px;
        margin: 20px 14px 6px;
        text-align: center;
    }
    .card_add{
        width: 100%;
        height:24px;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:24px;
        text-align: center;
    }
    /*内容*/
</style>
</head>
<body>
<div class="swiper-container swiper-containerr"  id="swiper1">
    <div class="swiper-wrapper">
        {volist name="banner" id="vv"}
        <div class="swiper-slide" onclick="gotypewhere({$vv.lb_where},{$vv.lb_content});"><img src="{$vv['lb_image']}" alt="" class="swiper-slide-img"></div>
        {/volist}
    </div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!---->
<style>
    .z_type {
        width: 144px;
        font-size: 36px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 50px;
        cursor: pointer;
    }

    .z_type1 {
        color: #6AB690;
    }

    .z_all {
        margin: 80px auto 60px;
    }
</style>
<div class="flex-wrap z_all">
    <div class="flex-con"></div>
    <div class="z_type" onclick="location.href='{:url('Renovation/index')}' ">装修公司</div>
    <div class="z_type z_type1" style="margin:0 80px;" onclick="location.href='{:url('Renovation/cases')}' ">设计案例</div>
    <div class="z_type" onclick="location.href='{:url('Renovation/designs')}' ">找设计师</div>
    <div class="flex-con"></div>
</div>
<!---->
<div class="outer">
    <div class="contents">
        <div class="">
            {volist name="data" id="vo"}
            <div class="card" onclick="location.href='{:url('home/Renovation/casedetail')}?cc_id={$vo['cc_id']}'">
                <img src="{$vo['cc_thumb']}" alt="">
                <div class="card_word">
                    {$vo['cc_title']}
                </div>
                <div class="card_add">
                    {$vo['cc_name']}
                </div>
            </div>
            {/volist}
            <div style="clear: both;height: 1px;width: 100%;"></div>

        </div>
    </div>
    <ul class="pagination flex-con" style="display: flex;justify-content: flex-end;">
        {$data->render()}
    </ul>
</div>
<div style="clear: both;height: 1px;width: 100%;"></div>
<br/>
{include file="public/footer"}
</body>
<script src="__JS__/swiper4.min.js"></script>
<script>
    var mySwiper1 = new Swiper ('#swiper1', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay:true,//等同于以下设置
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

    })
</script>

<script type="text/javascript">
    function gotypewhere(where,content) {
        if(where == 1){
            godetail(content);
        }else if(where == 2){
            location.href='/home/Economic/index';
        }else if(where == 3){
            location.href='/home/Renovation/detail?id='+content;
        }else{
            location.href=content;
        }
    }
</script>
</html>
